<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 登录表单区域 -->
      <span style="color:#fff;font-size:20px; position:absolute;top: 20px;left: 105px;">办公系统</span>
      <el-form size="mini">
        <!-- 用户名 -->
        <el-form-item>
          <el-input placeholder="手机号" v-model="utel" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item>
          <el-input placeholder="密码" v-model="upass" prefix-icon="el-icon-lock" show-password></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item>
          <el-input class="code" placeholder="验证码" v-model="checkcode"></el-input>
          <a @click="changeyzm">
            <img src="../assets/背景.jpg">
            <span
              style="position: absolute; right: 34px; font-size: 20px;"
              :style="{color:yzmColor}"
            >{{yzm}}</span>
          </a>
        </el-form-item>
        <!-- 记住我 -->
        <el-form-item>
          <el-checkbox label="记住我" class="rememberMe" v-model="rememberMe"></el-checkbox>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
      style="height:100%"
    ></vue-particles>
  </div>
</template>
<style scoped>
.login_container {
  height: 700px;
  /* background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%); */
  background-image: url("../assets/星空.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* height: 100%; */
}
.login_box {
  width: 290px;
  height: 350px;
  /* background-color: #fff; */
  background-color: #2e527bb3;
  border-radius: 5px;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.el-form {
  padding: 32px;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}
.el-button {
  width: 100%;
}
.code {
  width: 45%;
}
img {
  /* style="width: 100px; height: 30px; margin-left:5px;vertical-align: middle;" */
  display: line-inline;
  width: 45%;
  height: 28px;
  margin-left: 10px;
  vertical-align: middle;
  border-radius: 3px;
}
.rememberMe {
  color: #fff;
}
</style>
<script>
//引入jquery
import jquery from "jquery";
export default {
  created() {
    this.changeyzm();
  },
  data() {
    return {
      rememberMe: false,
      utel: "",
      upass: "",
      yzm: "",
      yzmColor: "",
      checkcode: ""
    };
  },
  methods: {
    //登录
    login() {
      this.changeYZM();
      // 正则验证
      var utels = /[1][3,5,7,8][0-9]{9}/;

      //手机号验证
      if (utels.test(this.utel)) {
        // alert(this.utel + "===" + this.upass);
        // alert(this.checkcode + "===" + this.yzm);
        //验证码验证
        if (this.checkcode === this.yzm) {
          //验证码正确
          this.$axios
            .post("/comsumer/login", {
              utel: this.utel,
              upass: this.upass
            })
            .then(res => {
              //判断登录成功
              if (res.data.statusCode == 200) {
                //确定登录角色
                if (res.data.data.roleName == "员工") {
                  //用户名  id
                  sessionStorage.setItem("utel",res.data.data.userInfo.utel)
                  sessionStorage.setItem("eid", res.data.data.userInfo.eid);
                  sessionStorage.setItem("ename", res.data.data.userInfo.ename);
                  sessionStorage.setItem( "head_pic", res.data.data.userInfo.head_pic);
                  this.$router.push("/yindex");
                  this.$message.success("登录成功");
                }
                if (res.data.data.roleName == "人事") {
                  sessionStorage.setItem("utel",res.data.data.userInfo.utel)
                  sessionStorage.setItem("eid", res.data.data.userInfo.eid);
                  sessionStorage.setItem("ename", res.data.data.userInfo.ename);
                  sessionStorage.setItem( "head_pic", res.data.data.userInfo.head_pic);
                  this.$router.push("/rindex");
                  this.$message.success("登录成功");
                }
                if (res.data.data.roleName == "领导") {
                  sessionStorage.setItem("utel",res.data.data.userInfo.utel)
                  sessionStorage.setItem("eid", res.data.data.userInfo.eid);
                  sessionStorage.setItem("ename", res.data.data.userInfo.ename);
                  sessionStorage.setItem( "head_pic",res.data.data.userInfo.head_pic);
                  this.$router.push("/lindex");
                  this.$message.success("登录成功");
                }

                if (res.data.data.roleName == "老板") {
                  sessionStorage.setItem("utel",res.data.data.userInfo.utel)
                  sessionStorage.setItem("eid", res.data.data.userInfo.eid);
                  sessionStorage.setItem("ename", res.data.data.userInfo.ename);
                  sessionStorage.setItem("head_pic", res.data.data.userInfo.head_pic);
                  this.$router.push("/laoindex");
                  this.$message.success("登录成功");
                }
              }else{
                if(res.data.statusCode == -200){
                  this.$message.error("账号或密码错误")
                }
              }
            })
            .catch(error => {
              console.log(error);
            });
        } else {
          this.$message.error("验证码不对");
        }
      } else if (!utels.test(this.utel)) {
        this.$message.error("手机号不符合格式,手机号由11位组成");
      }
    },

    changeyzm() {
      //随机生成验证码
      this.yzm = this.changeYZM();
      //随机颜色
      this.yzmColor = this.RandomColor();
    },
    //随机生成验证码
    changeYZM() {
      var code = "";
      var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      for (var i = 0; i <= 3; i++) {
        var charNum = Math.floor(Math.random() * 10);
        code += arr[charNum];
      }
      return code;
    },
    //随机颜色
    RandomColor() {
      let r, g, b;
      r = Math.floor(Math.random() * 256);
      g = Math.floor(Math.random() * 256);
      b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    }
  }
};
</script>
